<template>
  <div class="myExam-container">
    <el-header style="height:inherit;">
      <el-form :model="PaperForm" :rules="rules" ref="PaperForm" :inline="true" class="demo-form-inline clearfix">
        <div class="margindis">
        <el-form-item label="姓名" required prop="title" class="minwidth">
          <el-input v-model="PaperForm.title"></el-input>
        </el-form-item>
        <el-form-item label="手机号" required prop="examTime" class="tell">
          <el-input v-model="PaperForm.examTime" class="time-input"></el-input>
        </el-form-item>
        <el-form-item label="状态" required prop="typeList" class="option minwidth">
          <el-cascader :options="options" v-model="PaperForm.typeList" change-on-select>
          </el-cascader>
        </el-form-item>
        <el-form-item label="完成时间" required prop="passLine">
          <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="到" required prop="passLine" class="pause minwidth">
          <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        </div>
        <div class="selectbtn">
          <el-button type="primary" class="search" @click="search()" :loading="btnLoading">查询</el-button>
          <el-button type="primary" class="batch" @click="selectDel()" :loading="btnLoading">批量删除</el-button>
        </div>
      </el-form>
    </el-header>
    <el-container class="zindex">
      <el-main>
        <el-table :data="tableData" style="width: 100%" v-loading="tableLoading" @selection-change="handleSelectionChange">
          <el-table-column prop="id" type="selection" width="54"></el-table-column>
          <el-table-column type="index" label="序号" width="54"></el-table-column>
          <el-table-column label="试卷名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.upVo.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="名字" width="88">
            <template slot-scope="scope">
              <span>{{ scope.row.upVo.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="岗位" width="88">
            <template slot-scope="scope">
              <span>{{ scope.row.upVo.job }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <span class="cursor">{{ scope.row.upVo.isPass }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分数" width="100">
            <template slot-scope="scope">
              <span class="cursor">{{ scope.row.totalScore }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最后修改时间" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.updateDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="dialogVisible = true">详情</el-button>
              <el-button size="mini" type="primary" @click="dialogExamVisible = true">查看试卷</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 详情弹框 -->
        <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" class="popdivForm">
            <el-form-item label="姓名 :">
              <span>张三</span>
            </el-form-item>
            <el-form-item label="手机号 :">
              <span>12345</span>
            </el-form-item>
            <el-form-item label="岗位 :">
              <span>产品经理</span>
            </el-form-item>
            <el-form-item label="邮箱 :">
              <span>900@qq.com</span>
            </el-form-item>
            <el-form-item label="性别 :">
              <span>男</span>
            </el-form-item>
            <el-form-item label="出生日期 :">
              <span>67890</span>
            </el-form-item>
            <el-form-item label="级别 :">
              <span>初级</span>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 试卷预览 -->
        <el-dialog :visible.sync="dialogExamVisible" width="40%" :before-close="handleClose" v-loading="dialogLoading">
          <div class="test-type">
            <h4>java初级</h4>
          </div>
          <div class="scroll-bar">
            <div class="review-header">

              <div class="test-document">
                <span>正确题数 / 总题数
                  <span v-html="this.PaperForm.examTime"></span> 道 /
                  <span>XX</span>道
                </span>
                <span>得分 / 总分
                  <span v-html="this.questionCount"></span>分 /
                  <span v-html="this.questionScore"></span> 分 
                </span>
                <span>结果:
                  <span>未通过</span>
                </span>
              </div>
              <div class="documet-note clearfix">
                <div>试卷说明：</div>
                <div v-html="this.PaperForm.remarks">
                </div>
              </div>
            </div>
            <div class="review-body">
              <dl>
              <!-- <dl v-for="(item, index) in questionOptionList" :key="item.key"> -->
                <!-- <dt>
                  <span v-html="index+1 + '、' + item.question + '（）'"></span>
                  <span v-html="item.questionNo"></span>
                </dt>

                <dd v-for="(item2, index2) in item.domains" :key="item2.key" v-html="numberConvertLetterFun(index2) + '．' + item2.value">
                </dd> -->
                <dd> 
                  <p>正确答案 ：<span>c</span></p>
                  <p class="selectedAnswer">选择答案 ：<span>A</span><span>正确</span></p>
                  <div class="answer clearfix">
                    <p>试题解析 ：</p>
                    <p>
                      这里可能会有误区，其实普通的类方法是可以和类名同名的，
                      和构造方法唯一的区分就是，构造方法没有返回值。
                    </p>
                  </div>
                </dd>
              </dl>
            </div>
          </div>
        </el-dialog>
        <div class="page">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="pageTotal">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  // import { isvalidateRequired } from '@/utils/validate'
  // import { fetchTree } from '@/api/profession'
  import { fetchList, fetchDel, fetchListSearch, fetchSubmitList } from '@/api/quiz'
  import { Message } from 'element-ui'
  export default {
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        treeLoading: false,
        filterText: '',
        items: [],
        keyWord: '',
        tableData: [],
        tableLoading: false,
        pageSize: 10,
        pageTotal: 100,
        currentPage: 1,
        multipleSelection: [],
        PaperForm: {
          title: '',
          examTime: '',
          typeList: [],
          passLine: '',
          remarks: '',
          questionList: []
        },
        value1: '',
        value2: '',
        dialogVisible: false,
        labelPosition: 'right',
        dialogExamVisible: false
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    created() {
      // this.getExamList()
      this.submitList()
    },
    methods: {
      submitList() {
        this.tableLoading = true
        fetchSubmitList(this.currentPage, this.pageSize).then(response => {
          console.log(response)
          this.pageTotal = response.data.total
          this.tableData = response.data.data
          this.tableLoading = false
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      renderContent(h, { node, data, store }) {
        return (
          <div style='display:inline-block;text-algin:right;'>
            <span style='flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;'>
              <span>
                <span on-click={() => this.getQuestionListByType(data.value)} id='nodeLabel' style='text-align: left;'>
                  {node.label}
                </span>
              </span>
              <span style=''>
                <el-button style='font-size: 12px;' type='text' on-click={() => this.append(data)}>添加</el-button>
                <el-button style='font-size: 12px;' type='text' on-click={() => this.remove(node, data)}>删除</el-button>
              </span>
            </span>
          </div>
        )
      },
      search() {
        this.currentPage = 1
        fetchListSearch(this.keyWord).then(response => {
          this.pageTotal = response.data.total
          this.tableData = response.data.data
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getExamList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getExamList()
      },
      handleDelete(index, row) {
        this.$confirm('删除后不可恢复,确认删除？').then(response => {
          fetchDel(row.id).then(response => {
            Message.success('删除试卷成功')
            this.getExamList()
          })
        })
      },
      handleSelectionChange(selection) {
        this.multipleSelection = selection
      },
      selectDel() {
        if (this.multipleSelection.length > 0) {
          this.$confirm('删除后不可恢复,确认删除？').then(response => {
            var ids = []
            this.multipleSelection.forEach(function (item) {
              ids.push(item.id)
            })
            fetchDel(ids).then(response => {
              Message.success('删除试卷成功')
              this.getExamList()
            })
          })
        } else {
          Message.warning('请选择需要删除的试卷')
        }
      },
      goForm() {
        this.$router.push({
          path: '/form',
          name: 'quiz-form'
        })
      },
      goTrated() {
        this.$router.push({
          path: '/treated',
          name: 'quiz-treated'
        })
      }
    }
  }
</script>
<style scoped>
  .app-container {
    padding-top: 0;
  }

  .el-header {
    color: #333;
    padding: 0;
    margin: 0 auto;
    margin-top: 10px;
  }

  .el-header .el-input {
    width: 100%;
  }

  .el-header .time-input {
    width: 100%;
  }
  .margindis {
    display: table;
    width: 80%;
    float: left;
  }
  .el-form {
    margin-left: 10px;
  }
  .myExam-container .el-form .el-form-item{
    width: 20%;
    display: table-cell;
  }
  .myExam-container .el-form .minwidth{
    width: 14%;
  }
  .myExam-container .el-form>>>.el-form-item__label {
    float: left;
    width: 80px;
  }
  .myExam-container .el-form .minwidth>>>.el-form-item__label {
    width: 50px;
  }
  .myExam-container .el-form>>>.el-form-item__content {
    width: 62%;
    display: inherit;
  }
  .el-form--inline .el-form-item{
    margin-right: 0;
  }

  .option {
    width: 10%;
  }
  .tell {
    margin-left: -10px;
  }

  .pause {
    margin-left: -10px;
  }

  .el-main {
    color: #333;
    text-align: left;
    border-bottom: 0;
    padding: 0;
    overflow: inherit;
  }

  .cursor:hover {
    cursor: pointer;
  }

  .filter-container {
    padding-bottom: 4px;
  }

  .search {
    vertical-align: top;
    margin-left: 20px;
  }

  .tag {
    width: 60%;
  }

  .selectbtn {
    display: inline-block;
    float: left;
    /* margin-right: 10px; */
  }

  .el-table::before {
    height: 0;
  }

  .el-table>>>.el-table__header {
    width: 100%!important;
  }

  .el-table>>>.el-table__body {
    width: 100%!important;
  }

  .page {
    text-align: center;
    margin-top: 30px;
  }

  .el-pagination {
    display: inline-block;
    margin: 0 auto;
    height: 28px;
    line-height: 28px;
    padding: 0;
  }

  .popdivForm {
    margin: 0 auto;
    padding-right: 0;
    width: 50%;
  }
.test-type {
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 20px;
  }
  .test-type h4{
    text-align: center;
    margin: 0;
    font-weight: 400;
  }
 
  .popdivForm>>>.el-form-item__content {
    margin-left: 100px!important;
  }
  .selectedAnswer>span:last-child{
    margin-left: 20px;
  }
  .answer>p:first-child{
    float: left;
    margin: 0;
  }
  .answer>p:last-child{
    float: right;
    width: 88%;
    margin: 0;
  }
</style>